<style type="text/css">
	.layui-table-cell{
		height: auto; /* layui的表格高度自适应*/
	}
</style>

<fieldset class="layui-elem-field layui-field-title">
  <legend>分类列表</legend>
</fieldset>

<table id="list" lay-filter="list"></table>
<script type="text/html" id="bar">
	{{# if (d.status==1) { }}
	<a class="layui-btn layui-btn-sm" lay-event="recover">恢复</a>
	{{# } }}
	{{# if (d.status==0) { }}
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
	{{# } }}
	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
</script>

<script type="text/html" id="pic">
	{{#
	if(d.picture != null){
	}}
	<img src="http://127.0.0.1:9000/upload/{{d.picture}}"/>
	{{#
	}
	}}
</script>

<script type="text/html" id="edit">
<form class="layui-form">
	<input type="hidden" name="id" />
	<div class="layui-form-item">
		<label class="layui-form-label">分类名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" class="layui-input" placeholder="请输入分类名" />
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">父分类</label>
		<div class="layui-input-inline">
			<select name="parent"></select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">分类图片</label>
		<input type="hidden" name="picture" />
		<div class="layui-input-inline">
			<!-- 使用layui的上传图片插件 -->
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="test11">上传图片</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width: 92px; height: 92px;">
			    <p id="demoText"></p>
			  </div>
			  <div style="width: 95px;">
			    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
			      <div class="layui-progress-bar" lay-percent=""></div>
			    </div>
			  </div>
			</div>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" 
			lay-submit lay-filter="edit">修改分类</button>
		</div>
	</div>
	
</form>
</script>

<script type="text/javascript">
	layui.use(['table', 'form', 'upload', 'element'], function(){
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		
		//ajax异步请求数据渲染表格
		table.render({
			elem:'#list',
			url:'http://localhost:9000/api/goodsSorts',
			where:{parent: 0},
			method:'get',
			height:500,
			page: true,
			cols:[[
				{field: 'id', title: 'ID', width: 100},
				{field: 'name', title: '分类名',},
				{field: 'picture', title: '图片',templet:'#pic', width: 200},
				{field:'parent', title: '父分类', templet:function(d){
					return d.parentSort == null?'':d.parentSort.name;
				}},
				{field:'status', title:'状态', templet:function(d){
					return ['正常', '删除'][d.status];
				}, width: 100},
				{title:'操作', toolbar:'#bar', width: 150, fixed: 'right'}
			]],
			//解析数据
			parseData: function(res){
				return{
					"code": 0,
					"msg": res.msg,
					"count": res.data.total,
					"data": res.data.list
				};
			},
			done: function(res, curr, count){
							// 固定列高度适应
							$(".layui-table-main  tr").each(function (index ,val) {
								$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
							});
						}
		});
		
		/* 绑定表格的工具条事件 */
		table.on('tool(list)', function(obj){
			//obj工具条所在的一行的数据
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			
			if(layEvent == 'delete' || layEvent == 'recover'){
				
				layer.confirm(layEvent == 'delete'?'真的要删除吗?':'确定要恢复吗?', function(index){
					
					layer.close(index);
					//执行删除操作
					//ID在哪里 obj,data.id
					$.ajax({
						url: 'http://127.0.0.1:9000/api/goodsSorts',
						type: 'delete',
						data: {id: data.id},
						dataType: 'json',
						success: function(data){
							if (data.status == 200){
								//删除成功
								layer.msg(layEvent == 'delete'?'删除成功':'恢复成功');
							} else if (data.status == 404){
								layer.msg(data.msg);
							}
							
							//刷新表格
							table.reload('list');
						},
						error: function(){
							
						}
					});
					
				});	
			}else if(layEvent == 'edit'){
				// 弹出框，表单
				var index = layer.open({
					type: 1,
					content: $('#edit').html()
				});
				//debugger
				// 对表单的操作以及渲染一定要写在open之后
				// 将数据写入表单
				$("input[name='id']").val(data.id);
				$("input[name='name']").val(data.name);
				$("input[name='picture']").val(data.picture);
				
				//常规使用 - 普通图片上传
				  var uploadInst = upload.render({
				    elem: '#test11'
				    ,url: 'http://127.0.0.1:9000/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				      obj.preview(function(index, file, result){
				        $('#demo1').attr('src', result); //图片链接（base64）
				      });
				      
				      element.progress('demo', '0%'); //进度条复位
				      layer.msg('上传中', {icon: 16, time: 0});
				    }
				    ,done: function(res){
				      //如果上传失败
				      if(res.code > 0){
				        return layer.msg('上传失败');
				      }
				      //上传成功的一些操作
					  $("input[name='picture']").val(res.data);
				      //……
				      $('#demoText').html(''); //置空上传失败的状态
				    }
				    ,error: function(){
				      //演示失败状态，并实现重传
				      var demoText = $('#demoText');
				      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				      demoText.find('.demo-reload').on('click', function(){
				        uploadInst.upload();
				      });
				    }
				    //进度条
				    ,progress: function(n, elem, e){
				      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				      if(n == 100){
				        layer.msg('上传完毕', {icon: 1});
				      }
				    }
				  });
				
				form.on('submit(edit)', function(data){
					
					$.ajax({
							url: 'http://127.0.0.1:9000/api/goodsSorts',
							type: 'put',
							data: JSON.stringify(data.field),
							contentType: 'application/json; charset=utf-8',
							dataType: 'json',
							success: function(data) {
								if (data.status == 201) {
									//关闭弹窗
									layer.close(index);
									//刷新table
									table.reload("list");
									gotoUrl("sort/list.html");
								} else {
									layer.msg(data.msg || data.message);
								}
							},
							error: function() {
					
							}
						});
						return false;
				});
				
				//获取一级分类
				$.ajax({
					url: 'http://127.0.0.1:9000/api/goodsSorts',
					type: 'get',
					data: {},
					dataType: 'json',
					success: function(data) {
						if (data.status == 200) {
							var html = "<option value=''>请选择父分类</option>";
							$.each(data.data.list, function(index, item){
								if (obj.data.parent==item.id){
									html += "<option value='"+ item.id +"' selected='selected'>"+ item.name +"</option>"
								} else {
									html += "<option value='"+ item.id +"'>"+ item.name +"</option>"
								}
							});	
							$("select[name='parent']").html(html);
							form.render();
						} else {
							layer.alert(data.msg, function() {
								window.location.href="login.html";
							});
						}
						
					},
					error: function(){
				
					},
				});
				
	
			}
			
		 });
	});
</script>